<template>
	<view>
		<image src="../../static/img/Rectangle.png" style="width: 750rpx;height: 296.6rpx;" mode=""></image>
		<view class="px-25 position-relative" style="top:-114rpx;z-index: 9990;">
			<view class="card">
				<view class="font22 font-weight-500 mb-3" style="color: #818181;">充值类型</view>
				<view class="flex align-center mb-3">
					<view
						class="flex align-center justify-center mx-1 numitem"
						v-for="(item, index) in baoList"
						:key="index"
						:class="{ active: baoIndex == index }"
						style="width: 200rpx; height: 200rpx;"
						@click="changeBao(index, item.priceId)"
					>
						<view class="flex-column align-center justify-center">
							<view class="color333 font28 text-center">{{ item.title }}</view>
							<view class="flex align-end">
								<view class="font28 text-main">￥</view>
								<view class="text-main line-h" style="font-size: 60rpx;">{{ item.price }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="font22 font-weight-500 mb-3" style="color: #818181;">选择充值对象</view>
				<view class="flex-column">
					<view
						class="flex align-center justify-between border-bottom"
						v-for="(item, index) in userList"
						:key="index"
						@click="changeIndex(index, item.user_id)"
						style="height: 92rpx;"
					>
						<view class="font28 color333">{{ item.user_name }}</view>
						<image src="../../static/img/ic_checked.png" style="width: 48rpx;height: 48rpx;" v-if="index == subindex" mode=""></image>
						<image src="../../static/img/ic_uncheck.png" style="width: 48rpx;height: 48rpx;" v-else mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="fixed-bottom px-2 mb-5"><main-button @click="submit">支付</main-button></view>
	</view>
</template>

<script>
import mainButton from '../../components/common/main-buttom.vue';
export default {
	components: { mainButton },
	data() {
		return {
			baoIndex: 0,
			subindex: 0,
			baoList: [],
			userList: [],
			longConfigId: '',
			longXsglid: ''
		};
	},
	onLoad() {
		if (window.location.href.indexOf('?#') < 0) {
			window.location.href = window.location.href.replace('#', '?#');
		}
		// this.getData();
		this.getUserInfo();
	},
	methods: {
		changeBao(index, id) {
			this.baoIndex = index;
			this.longConfigId = id;
		},
		changeIndex(index, id) {
			this.subindex = index;
			this.longXsglid = id;
		},
		getData(id) {
			let _this = this;
			let opts = {
				url: 'getConfigDataWidthJf.shtml',
			};
			let param = {xsId: id};
			_this.$http.httpRequest(opts, param).then(
				res => {
					console.log(res.data);
					if (res.data.code == '200') {
						_this.baoList = res.data.data;
						_this.longConfigId = res.data.data[0].priceId;
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						});
					}
				},
				error => {
					console.log(error);
				}
			);
		},
		getUserInfo() {
			let _this = this;
			let opts = {
				url: 'UserInfo.shtml'
			};
			let param = {
				token: uni.getStorageSync('userInfo').token
			};
			_this.$http.httpRequest(opts, param).then(
				res => {
					console.log(res.data);
					if (res.data.code == '200') {
						_this.userList = res.data.data.class_info;
						_this.longXsglid = res.data.data.class_info[0].user_id;
						_this.getData(_this.longXsglid);
					}
				},
				error => {
					console.log(error);
				}
			);
		},
		// #ifdef H5
		submit() {
			let _this = this;
			let opts = {
				url: 'Pay/JSAPIPayInfo.shtml'
			};
			let param = {
				longJzglId: uni.getStorageSync('userInfo').user_id,
				longXsglid: _this.longXsglid,
				longConfigId: _this.longConfigId,
				openid: uni.getStorageSync('openId')
			};
			_this.$http.httpRequest(opts, param).then(
				res => {
					console.log(res.data);
					if (res.data.code == '200') {
						_this.$wxPay(
							res.data,
							s => {
								uni.switchTab({
									url: '../my/my'
								});
							},
							e => {
								uni.switchTab({
									url: '../my/my'
								});
							}
						);
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						});
					}
				},
				error => {
					console.log(error);
				}
			);
		}

		// #endif
	}
};
</script>

<style>
.card {
	background: rgba(255, 255, 255, 1);
	box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(64, 64, 64, 0.12);
	border-radius: 20rpx;
	padding: 30rpx 40rpx;
}
.numitem {
	background-color: #eeeeee;
}
.active {
	background-color: #fbd7a5;
}
</style>
